<template>
  <div class="message">
    <div class="common-form-box">
      <div class="tools-container" style="margin-top: 20px; margin-left: 20px">
        <div class="buttons">
          <el-button type="primary" @click="addShow">新增</el-button>
        </div>
      </div>
      <!-- 主体表格内容 -->
      <el-table :data="list" border center style="width: 95%; margin:0 auto">
        <el-table-column width="120" type="index" label="序号" align="center" />
        <el-table-column align="center" label="场景名" prop="sceneName" />
        <el-table-column align="center" label="自动关闭时间/s" prop="times" />
        <el-table-column align="center" label="操作" width="450">
          <template slot-scope="scope">
            <el-button @click="close(scope.row)">手动关闭</el-button>
            <el-button @click="editShow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="isCreate ? '新增' : '修改'" :visible.sync="formShow" width="700px" top="20vh">
      <el-form ref="commonForm" :model="commonForm" :rules="rules" label-width="120px">
        <el-form-item label="场景名" prop="sceneId">
          <el-select v-model="commonForm.sceneId" placeholder="请选择">
            <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="自动关闭时间/s" prop="times">
          <el-input v-model="commonForm.times" placeholder="请输入自动关闭时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formShow = false">取消</el-button>
        <el-button v-if="isCreate" type="primary" @click="addData('commonForm')">确认新增</el-button>
        <el-button v-else type="primary" @click="editData('commonForm')">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSceneList } from '@/api/scene'
import { get, add, edit, handClose } from '@/api/warnDevice'
import { validateWarnDevice } from '@/utils/validate'
export default {
  name: 'WarnDevice',
  data() {
    return {
      sceneList: [],
      list: [],
      formShow: false,
      isCreate: true,
      commonForm: {
        sceneId: '',
        times: ''
      }
    }
  },
  computed: {
    rules() {
      // 返回表单验证
      return validateWarnDevice
    }
  },
  mounted() {
    this.getList()
    this.getScene()
  },
  methods: {
    // 获取场景列表
    getScene() {
      getSceneList().then(res => {
        if (res.ok) {
          this.sceneList = res.data
        }
      })
    },
    // 获取列表
    getList() {
      get().then(res => {
        this.list = res.data
      })
    },
    // 新增初始化
    addShow() {
      this.formShow = true
      this.isCreate = true
      setTimeout(() => {
        this.$refs['commonForm'].resetFields()
      }, 100)
    },
    // 新增
    addData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.commonForm).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 800
            })
            this.getList()
            this.$refs[formName].resetFields()
            this.formShow = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 修改初始化
    editShow(form) {
      this.formShow = true
      this.isCreate = false
      setTimeout(() => {
        this.$refs['commonForm'].resetFields()
        this.commonForm = {
          ...form
        }
      }, 100)
    },
    // 修改提交
    editData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          edit(this.commonForm).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 800
            })
            this.getList()
            this.$refs[formName].resetFields()
            this.formShow = false
          })
        }
      })
    },
    // 手动关闭
    close(data) {
      handClose({ id: data.sceneId }).then(res => {
        this.$message({
          message: '关闭成功',
          type: 'success',
          duration: 800
        })
        this.getList()
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .message {
    width: 100%;
  }
  .phone-code-inpuit {
    width: 60%;
  }
  .code-button {
    background: transparent;
    border: none;
    color: #0ad239;
    &.is-disabled:hover {
      color: #0ad239;
      background-image: none;
      background-color: transparent;
      border-color: transparent;
    }
  }

</style>
